<template>
  <div class="bigBox">
    <!-- 顶部导航栏置顶 -->
    <div class="header">
      <div class="header-box">
        <div class="header-ico">
          <img
            class="img1"
            src="https://t-hr.sbtjt.com/assets/img/login-banner.2bae468.svg"
            alt="首页图片1"
          />
        </div>
        <div class="user-header">
          <img
            class="header1"
            src="https://t-hr.sbtjt.com/assets/img/avatar.d6615a6.png"
            alt="用户头像"
          />
          <span style="line-height: 55px;margin-left: 10px;color: #ffffff"
            >用户名字</span
          >
        </div>
      </div>
    </div>
    <div class="content">
      <div class="content-left">
        <el-container>
          <el-col :span="24">
            <el-menu
              default-active="2"
              class="el-menu-vertical-demo"
              text-color="#000000"
              active-text-color="#00BFFF"
              router
            >
              <el-submenu index="/login">
                <template slot="title">
                  <span>导航一</span>
                </template>
                <el-menu-item index="/test2">选项2</el-menu-item>
                <el-menu-item index="/test3">文件上传</el-menu-item>
                <el-menu-item index="/employee">用户管理</el-menu-item>
                <el-menu-item index="/form">form表单封装</el-menu-item>
                <el-menu-item index="/vuex">vuex测试</el-menu-item>
                <el-menu-item index="/map">map</el-menu-item>
              </el-submenu>
              <el-submenu>
                <template slot="title">
                  <span>工单分析报表</span>
                </template>
                  <el-menu-item index="/echart">各模块折线图</el-menu-item>
              </el-submenu>
              <el-submenu>
                <template slot="title">
                  <span>设置</span>
                </template>
                  <el-menu-item index="/importExcel">工单导入</el-menu-item>
              </el-submenu>
            </el-menu>
          </el-col>
        </el-container>
      </div>
      <div class="content-right">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>
<script>
import mainNav from "@/components/common/mainNav";
export default {
  data() {
    return {};
  },
  components: {
    mainNav
  },
  created() {
  },
  methods: {}
};
</script>
<style scoped lang="less">
.bigBox {
  width: 100%;
}
.header {
  width: 100%;
  height: 56px;
  position: fixed;
  background-image: linear-gradient(180deg, #364d73, #2a3c59);
  top: 0;
  left: 0;
  .header-box {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    .header-ico {
      .img1 {
        width: 200px;
        height: 50px;
      }
    }
    .user-header {
      width: 100px;
      display: flex;
      .header1 {
        display: block;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        line-height: 30px;
        align-self: center;
      }
    }
  }
}
.content {
  width: 100%;
  display: flex;
  flex-direction: row;
  position: absolute;
  left: 0;
  top: 56px;
  bottom: 0;
  .content-left {
    flex: 1;
    display: flex;
    flex-flow: column wrap;
    .nav-link {
      position: absolute;
      top: 0;
    }
  }
  .content-right {
    background-color: rgb(247, 248, 250);
    flex: 6;
  }
}
</style>